<template>
  <div class="home">
    <elTable :showSummary="true" :rules="rules" @getRest="getRest" :requestData="requestData"
      @getDialogClose="getDialogClose" :operateWidth="300" @getAdd="getAdd" @getSelectChange="getSelectChange"
      @getSearch="getSearch" :dict="dict" :showOverflowTooltip="true" @getDelete="getDelete" @getExport="getExport"
      @getEdit="getEdit" @getDetails="getDetails" :isRightClick="true" @sortChange="sortChange" @rightClick="rightClick"
      @clickCurrentChange="currentChange" :isCurrentRowHeight="true" @selectionChange="selectChange"
      :tableLabelList="data.labels" :tableDataList="data.datas">
      <!-- 性别 -->
      <template v-slot:sex="{ scope }">
        <span>
          {{ scope.row.sex == 1 ? '男' : '女' }}
        </span>
      </template>
      <!-- 职业 -->
      <template v-slot:career="{ scope }">
        <span>
          {{ scope.row.career | careerfilters }}
        </span>
      </template>
      <!-- 技术栈 -->
      <template v-slot:technologyStack="{ scope }">
        <span>
          {{ scope.row.technologyStack | technologyStackfilters(scope) }}
        </span>
      </template>
      <!-- 文件 -->
      <!-- <template v-slot:file="{ scope }">
        <el-image :src="scope.row.myImg" fit="cover"></el-image>
      </template> -->
    </elTable>

  </div>
</template>
<script>

import elTable from '@/components/elTable'
import dict from './dict'
import data from './data'
export default {
  components: {
    elTable,
  },
  data() {
    return {
      data,
      dict,
      requestData: {
        search: {
          url: '',
          method: '',
        },
        add: {
          url: '',
          method: '',
        },
        view: {
          url: '',
          method: '',
        },
        edit: {
          url: '',
          method: '',
        },
        del: {
          url: '',
          method: '',
        },
        export: {
          url: '',
          method: '',
        }

      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        address: [
          { required: true, message: '请输入地址', trigger: 'blur' },
        ],
        career: [
          { required: true, message: '请选择职业', trigger: 'change' }
        ],
        technologyStack: [
          { required: true, message: '请选择技能', trigger: 'change' }
        ],
        starDate: [
          { required: true, message: '请选择入职时间', trigger: 'change' }
        ],
        endDate: [
          { required: true, message: '请选择离职时间', trigger: 'change' }
        ],
        idCard: [
          { required: true, message: '请输入身份证号码', trigger: 'blur' },
        ]
      }



    }
  },
  created() {
    this.getSearch()
  },
  methods: {

    // 下拉框选择
    getSelectChange(item, value) {
      console.log(item, value)
      if (item.label == '职业') {
        this.data.labels.forEach((item, index) => {
          if (item.label == '技术栈') {
            switch (value) {
              case 4:
                item.selectDictionary = 'javaTechnologyStack';
                break;
              case 5:
                item.selectDictionary = 'webTechnologyStack';
                break;
              case 6:
                item.selectDictionary = 'uiTechnologyStack';
                break;
            }

          }
        })
      }
    },
    // dialog关闭回调
    getDialogClose(row) {
      this.data.labels.forEach((item, index) => {
        if (item.label == '技术栈') {
          switch (row.career) {
            case 4:
              item.selectDictionary = '';
              break;
            case 5:
              item.selectDictionary = '';
              break;
            case 6:
              item.selectDictionary = '';
              break;
          }
        }
      })
    },
    // 重置
    getRest(value) {

    },

    // 搜索
    getSearch(val) {
      // console.log(this.data.labels)
      // this.data.labels.forEach((item, index) => {
      //   if (item.ruleName) {
      //     this.rules[item.ruleName] = this.rulesObj[item.ruleName]
      //   }
      // })
      // console.log(this.rules, 'rrrr')
    },
    // 新增
    getAdd() {
      console.log('新增')

    },
    // 查看
    getDetails(row) {
      this.data.labels.forEach((item, index) => {
        if (item.label == '技术栈') {
          console.log(item, 'eeeeeeeee')

          switch (row.career) {
            case 4:
              item.selectDictionary = 'javaTechnologyStack';
              break;
            case 5:
              item.selectDictionary = 'webTechnologyStack';
              break;
            case 6:
              item.selectDictionary = 'uiTechnologyStack';
              break;
          }

        }
      })
      console.log(row, '查看2222')
    },
    // 编辑
    getEdit(row) {
      console.log(row, 'rrrrr')
      this.data.labels.forEach((item, index) => {
        if (item.label == '技术栈') {
          switch (row.career) {
            case 4:
              item.selectDictionary = 'javaTechnologyStack';
              break;
            case 5:
              item.selectDictionary = 'webTechnologyStack';
              break;
            case 6:
              item.selectDictionary = 'uiTechnologyStack';
              break;
          }

        }
      })
      console.log(row, '编辑')
    },
    // 导出
    getExport(row) {
      console.log(row, '导出')
    },
    // 删除
    getDelete(row) {
      console.log(row, '删除')
    },
    // 选择框
    selectChange(v) {
      // console.log(v, 'v')
    },
    //点击当前行
    currentChange(row) {
      console.log(row)
    },
    // 右键点击行
    rightClick(row, column, event) {

    },
    // 排序事件
    sortChange(value) {
      console.log(value, 'value')
    },

  }
}
</script>

<style scoped></style>